<template>
    <div>
      <div id="components-layout-demo-basic">
        <a-layout>
      <Header style="background-color: aliceblue"></Header>

          <a-layout-content>
            <ul  v-lazy-container="{ selector: 'li'}" class="sub_list" v-for="(item,index) in list" :key="index" @click="detailBlog(item.id)">
              <li class="list" style="line-height:150px;">
                <img :src=item.img alt="" style="display: inline-block">
              </li>
              <li class="list content">
                <strong>{{item.title}}</strong>
                <div class="item_content" style="">{{item.content}}</div>
                <div class="item_content" style="">{{item.time}}</div>
              </li>

<!--              <li class="dealImg">-->
<!--                <img @click="editBlog(item.id)" src="../assets/bianji.png" alt="">-->
<!--                <img @click="delBlog(item.id,index)" src="../assets/lajitong.png" alt="">-->
<!--              </li>-->
            </ul>
          </a-layout-content>
          <a-layout-footer></a-layout-footer>
        </a-layout>
      </div>
    </div>
</template>

<script>
  import {getBlogAll} from '../api/api'
  import Header from '../global/Header'
    export default {
        components: {
            Header
        },
        name: "Community",
        data () {
            return {
                list:[],
            }
        },

        methods:{
            getData () {
                getBlogAll().then(res=>{
                    console.log(res);
                    this.list = res.data.list;
                })
            },


            /**
             * 展示详情
             */
            detailBlog (id) {
                let routeUrl = this.$router.resolve({
                    path: '/ShowBlog',
                    query: {id:id}
                });
                window.open(routeUrl.href, '_blank');
            }
        },

        mounted() {
            this.getData();
        }
    }
</script>

<style scoped>
  *{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #wrap{
    margin:30px;
  }
  .sub_list{
    position: relative;
    cursor: pointer;
    display: inline-block;
    /*border:1px solid;*/
    height:150px;
    width: 90%;
    margin: auto;
    margin-top:20px;
    margin-left:20px;
    box-shadow: 1px 2px 5px rgba(67, 71, 68, 0.94);
    text-align: left;
    min-width:600px;
    transition: box-shadow .5s;
  }
  .sub_list:hover{
    box-shadow: 3px 5px 7px rgba(59, 61, 59, 0.94);
  }
  .sub_list::before{
    content:'';
    background-image: url(../assets/img1.jpg);
    background-size:100%;
    width:100%;
    height:150px;
    position:absolute;
    opacity: 0.1;

  }
  .sub_list .list{
    /*border:1px solid red;*/
    vertical-align: middle;
    display: inline-block;
    text-align: left;
    height: 100%;
    margin-right: 20px;
  }
  .sub_list .list img{
    /* height: 100%; */
    max-width: 150px;
    margin-left:10px;
  }
  .sub_list .content{
    height: 100px;
    max-width: 300px;
  }
  .dealImg{
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    top:50%;
    margin-top:-10px;
    right:20px;
  }
  .dealImg img{
    max-height: 18px;
    max-width:20px;
    display: none;
    transition: display .5s;
  }

  .sub_list:hover .dealImg img{
    display: inline-block;
  }

  #components-layout-demo-basic .ant-layout-header,
  #components-layout-demo-basic .ant-layout-footer {
    /* background: #7dbcea; */
    color: #fff;
    min-width: 500px;
  }
  #components-layout-demo-basic .ant-layout-header{
    top:0;
    position: sticky;
  }

  #components-layout-demo-basic .ant-layout-content {
    margin-bottom: 20px;

  }

  strong{
    display:inline-block;font-size: 21px;overflow: hidden;max-width:300px;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .item_content{
    max-width:300px;display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

  }
</style>
